<template>
  <el-card style="width: 70%;min-height:400px;margin: 0 auto;margin-top: 40px;border-radius: 20px;margin-bottom: 50px">
    <el-page-header @back="goBack" style="color:#321f46">
      <template #content>
        <span class="text-large font-600 mr-3" style="color:#321f46" > 详情 </span>
      </template>
    </el-page-header>
    <h2 style="margin-top: 25px">
      {{article.articleDescription}}
    </h2>
    <a-list
        :bordered="false"
        :pagination-props="paginationProps"

    >
      <a-list-item action-layout="vertical" >
        <div style="display: flex;">
          <div><a-avatar v-if="article.userImg!=null"><img :src="BASE_URL+article.userImg"></a-avatar>
            <el-avatar v-else
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            /></div>
          <div style="position: relative;left: 10px;top: -20px"><h2>{{article.nickname}}</h2></div>
          <div style="position: relative;top: 20px;left: -30px;color: #3f3f3f"><span>{{article.createTime}}</span></div>
        </div>
        <div style="margin-bottom: 10px"><span>{{article.articleContent}}</span></div>
        <div style="margin-bottom: 20px;"><img alt="image" width="200px" height="200px"  v-if="article.imgUrl!=null"
                                           v-for="url in article.imgUrl.split(',')"
                                           :src="BASE_URL+url"
                                           style="margin-right: 10px;"
        ></div>
    <!-- 按钮点赞等-->
        <template #actions>
              <span key="heart" @click="onLikeChange(article.forumArticleId,article.articleLike,article.isLike)">
                <span v-if="article.isLike">
                  <IconHeartFill :style="{ color: '#f53f3f' }" />
                </span>
                <span v-else>
                  <IconHeart />
                </span>
                  {{ article.articleLike }}
              </span>
          <span key="star" @click="onStarChange(article.forumArticleId,article.articleCollect,article.isCollect)">
                <span v-if="article.isCollect">
                  <IconStarFill :style="{ color: '#ffb400' }" />
                </span>
                <span v-else>
                  <IconStar />
                </span>
                {{ article.articleCollect }}
              </span>
          <span>访问量:{{article.visit}}</span>
        </template>
      </a-list-item>
    </a-list>

    <div class="editBox">
      <div style="width: 90%;margin-top: 20px;margin-left: 20px">
        <a-input placeholder="发表你的评论" v-model="commentsList.commentContent"></a-input>
      </div>
      <div><a-button style="width: 40px;color: white;left: 880px;top: -32px" @click="insertComment(article.forumArticleId)">发送</a-button></div>
    </div>
<!-- 一级评论-->
    <a-comment
        style="position: relative;width: 500px;top: -70px;left: 50px"
        v-for="(item,index) in commentsList"
        :key="index"
    >
      <div style="margin-top: 50px;margin-bottom: -20px" v-if="item.parentCommentId===null">
        <div style="display: flex">
          <el-avatar v-if="item.userImg!=null" shape="square"><img  :src="BASE_URL+item.userImg" /></el-avatar>
          <el-avatar v-else
                     src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <div style="position:relative;top:2px;left: 25px;bottom: -30px">
            <div style="top:25px;font-size:15px">
              <span style="font-weight: bold">{{item.nickname}}:</span>
              <span>{{item.commentContent}}</span>
            </div>
            <div style="position: relative;left: 75px;top: -26px"><span></span></div>
            <div style="position: relative;font-size: 12px;color: #3f3f3f"><span>{{ item.createTime }}</span></div>
          </div>
        </div>
      </div>
      <a-comment>
        <template #actions>
          <span @click="secondComment(item.commentId,null,item.forumArticleId)"><icon-message /></span>
          <span @click="loadComment2(item.forumArticleId,item.commentId);selectComment2(item.commentId)"><icon-more /></span>
          <span v-if="user!=null && item.userId === user.userId" @click="deleteComment(item.commentId);loadComment(item.forumArticleId)"><icon-delete /></span>
        </template>
      </a-comment>
      <!--二级评论-->
      <a-comment
          v-show="commentIndex2 == item.commentId"
          v-for="(item2,index2) in commentList2"
          :key="index2"
          style="position: relative;left: 30px;margin-bottom: -50px"
      >
        <div v-if="item2.parentCommentId === item.commentId" style="position: relative;">
          <div style="display: flex;position: relative;">
            <div style="position: relative;top: -30px">
              <el-avatar v-if="item2.userImg!=null" shape="square"><img :src="BASE_URL+item2.userImg" /></el-avatar>
              <el-avatar v-else
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
            </div>
            <div style="position:relative;top: -25px;left: 20px;margin-bottom: -20px;font-size: 15px">
              <span style="font-weight: bold;">{{item2.nickname}}</span>
              <span style="position: relative;left: 5px;" v-if="item2.commentName!==null">回复@{{item2.commentName }}:{{item2.commentContent}}</span>
              <span style="position: relative;left: 5px;" v-else>:{{item2.commentContent}}</span>
              <br/>
              <span style="position: relative;font-size: 12px;color: #3f3f3f"><span>{{ item2.createTime }}</span></span>
            </div>
          </div>
        </div>
        <a-comment style="position: relative;top: -60px">
          <template #actions>
            <span @click="secondComment(item.commentId,item2.nickname,item2.forumArticleId)"><icon-message /></span>
            <span v-if="user!=null && item2.userId === user.userId" @click="deleteComment(item2.commentId);loadComment2(item.forumArticleId,item.commentId)"><icon-delete /></span>
          </template>
        </a-comment>
      </a-comment>
    </a-comment>
    <el-divider content-position="right" style="margin-top: -30px;">End</el-divider>
  </el-card>
  <!--  二级回复弹窗-->
  <el-dialog v-model="dialogVisible2" style="width: 500px;" >
    <div style="position: relative;bottom: 5px"><span>回复:{{commentName}}</span></div>
    <el-input placeholder="输入你的回复" v-model="commentsList.commentContent"></el-input>
    <el-button type="primary" style="position: relative;top: 10px;left: 410px" @click="insertComment(articleId,comment2Index)">发送</el-button>
  </el-dialog>

</template>

<script>
import {reactive, ref} from 'vue'
import {
  IconHeart,
  IconMessage,
  IconStar,
  IconStarFill,
  IconHeartFill,
  IconPlus,
  IconReply,
  IconShareInternal,
  IconMore,
  IconDelete,
} from '@arco-design/web-vue/es/icon';


const reply = ref(false);
const changeReply = ()=>{
  reply.value = !reply.value;
}
export default {
  components: {
    IconHeart,
    IconMessage,
    IconStar,
    IconStarFill,
    IconHeartFill,
    IconPlus,
    IconReply,
    IconShareInternal,
    IconMore,
    IconDelete,
  },
  setup() {
    return {
      reply,
      changeReply
    }
  },
}
</script>

<script setup>


//接收数据
import axios from "axios";
import {onMounted, ref} from "vue";
import qs from "qs";
import {ElMessage} from "element-plus";

const user = ref(getUser())

const article = ref({});

let id = localStorage.getItem('id');
const loadArticle = ()=>{
  if (user.value==null){
    axios.get(BASE_URL+'/v1/forum/selectNo1/'+id)
        .then((response)=>{
          if (response.data.code==2000){
            article.value = response.data.data
            loadComment(id);
            selectVisit();
          }
        })
  } else {
    let userId = user.value.userId
    axios.get(BASE_URL+'/v1/forum/select1/'+id+'/' + userId)
        .then((response)=>{
          if (response.data.code==2000){
            article.value = response.data.data
            loadComment(id);
            selectVisit();
            console.log(article.value)
          }
        })
  }



}
onMounted(()=>[
    loadArticle()
])

//控制点赞
const like = ref(false)
//控制收藏
const star = ref(false)
const onLikeChange = (id,cont,isLike)=>{
  if (user.value==null){
    ElMessage.error('请先登录!')
  } else {
    like.value = isLike==1?false:true;
    if (like.value==true){
      cont += 1
    }else {
      cont -= 1
    }
    let userId = user.value.userId
    axios.post(BASE_URL+'/v1/forum/arLike/'+id+'/' + userId + '/' + cont).then((response)=>{
      if (response.data.code==2000){
        loadArticle();
      }
    })
  }
}
const onStarChange = (id,cont,isCollect)=>{
  if (user.value == null){
    ElMessage.error('请先登录!')
  } else {
    star.value = isCollect==1?false:true;
    if (star.value==true){
      cont += 1
    }else {
      cont -= 1
    }
    let userId = user.value.userId
    axios.post(BASE_URL+'/v1/forum/arCollect/'+id+'/' + userId + '/' + cont).then((response)=>{
      if (response.data.code==2000){
        loadArticle();
      }
    })
  }
}

//保存评论信息
const commentsList = ref([{
  userId:'',
  nickname:'',
  commentId:'',
  commentContent:'',
  forumArticleId:'',
  parentCommentId:'',
}])
//发表评论
const insertComment = (forumArticleId,parentCommentId)=>{
  if (user.value==null){
    ElMessage.error('请先登录!');
  }else {
    commentsList.value.userId = user.value.userId
    commentsList.value.nickname = user.value.nickname
    commentsList.value.forumArticleId = forumArticleId;
    commentsList.value.parentCommentId = parentCommentId;
    if (commentName.value != null){
      commentsList.value.commentName = commentName.value
    }
    let data = qs.stringify(commentsList.value);
    axios.post(BASE_URL+'/v1/forum/insertComment',data).then((response)=>{
      if (response.data.code==2000){
        ElMessage.success('评论成功!');
        commentsList.value.commentContent = [];
        loadComment(forumArticleId);
        dialogVisible2.value=false;
      }else {
        ElMessage.error('评论失败!');
      }
    })
  }

}
//返回上一页
const goBack = () => {
  history.back(-1);
  console.log('go back');
}
//加载评论
const loadComment = (id)=>{
  axios.get(BASE_URL+'/v1/forum/selectComment/'+id).then((response)=>{
    if (response.data.code==2000){
      commentsList.value = response.data.data;
      console.log(commentsList.value)
    }
  })
}

// 控制评论菜单
const commentsVisible = ref(false)
const commentIndex2 = ref(0)
const selectComment2 = (id)=>{
  commentIndex2.value = id;
  commentsVisible.value = true;
}
//控制二级评论弹窗
let dialogVisible2 = ref(false)
// 控制二级评论回复对象
const commentName = ref()
// 控制二级评论文章id对象
const articleId = ref()
// 保存父评论id
const comment2Index = ref(0)
// 定义输出格式
// 控制二级评论弹窗
const secondComment = (commentId,nickname,forumArticleId)=>{
  articleId.value = forumArticleId;
  commentName.value = nickname;
  comment2Index.value = commentId;
  dialogVisible2.value = true;
}
// 保存二级评论
const commentList2 = ref([])
const loadComment2 = (forumArticleId,parentCommentId)=>{
  axios.get(BASE_URL+'/v1/forum/selectSecondComment/'+forumArticleId +'/'+parentCommentId).then((response)=>{
    if (response.data.code==2000){
      commentList2.value = response.data.data;
      console.log(commentList2.value)
    }
  })
}

//删除评论
const deleteComment = (id)=>{
  if (confirm('确定要删除吗?')) {
    axios.post(BASE_URL + '/v1/forum/deleteComment/'+id).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success('删除成功!');
      }
    })
  }
}

//查询访问量
const selectVisit = ()=>{
  axios.get(BASE_URL+'/v1/forum/selectVisit/'+id)
      .then((response)=>{
        if (response.data.code==2000){
          article.value.visit = response.data.data
        }
      })
}

</script>


<style scoped>
button{
  background: linear-gradient(90deg, rgb(108, 66, 149), rgb(74, 66, 149));/*渐变颜色*/
  margin: 0 auto;
  transition: transform .2s; /* 动画 */
  :deep(.el-button__wrapper) {
    box-shadow: 0 0 5px rgb(108, 66, 149); /* 霓虹边框效果，可以根据需求调整颜色和模糊度 */
    border-radius: 20px; /* 设置圆角半径 */
    cursor: default;
    .el-button__inner {
      cursor: default !important;
    }
  }
}
button:hover{
  background: linear-gradient(45deg, #6c4295, #b78ae3);
  transform: scale(1.2); /* （120% 缩放按钮动态*/
}
</style>